<script setup>
import {getCurrentInstance, ref} from 'vue';


const commentList = ref([]);

const instance = getCurrentInstance();
if (instance) {
  const global = instance.appContext.config.globalProperties;
  global.$http.get('/public/comment/query/{targetId}')
      .then(resp => {
        console.log(resp.data);
        commentList.value = resp.data;
      })
      .catch(err => {
        console.error(new Error(err));
      });
}

</script>

<template>
  <div class="comment-container">
    <!-- 评论列表区域 -->
    <div
        v-for="(comment, index) in commentList"
        :key="index"
        class="comment-item"
    >
      <el-avatar :src="comment.avatar" class="comment-avatar" />
      <div class="comment-content">
        <div class="comment-username">{{ comment.content }}</div>
        <div class="comment-text">{{ comment.text }}</div>
      </div>
    </div>
    <!-- 输入及发送区域 -->
    <router-link :to="{ name: 'Comment'}">
    <div class="input-area">
      <el-input
          v-model="inputValue"
          placeholder="说点什么..."
          class="input-box"
          clearable
      />
      <el-button type="primary" @click="handleSend">发送</el-button>
    </div>
    </router-link>
  </div>
</template>


<style scoped>
.comment-container {
  background-color: #409eff;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
}
.comment-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.comment-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.comment-content {
  display: flex;
  flex-direction: column;
}
.comment-username {
  font-weight: bold;
  margin-bottom: 4px;
}
.comment-text {
  word-wrap: break-word;
}
.input-area {
  display: flex;
  margin-top: 10px;
}
.input-box {
  flex: 1;
  margin-right: 10px;
}
</style>